<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px" label-position="left" class="return-materials-form">
      <el-divider content-position="left">基本信息</el-divider>
      <el-row :gutter="24">
        <el-col :sm="12" :xs="24">
          <el-form-item label="单据类型" prop="documentType">
            <el-select v-model="form.documentType" placeholder="请选择单据类型">
              <el-option label="生产退料" value="生产退料" />
              <el-option label="采购退料" value="采购退料" />
              <el-option label="其他退料" value="其他退料" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :sm="12" :xs="24">
          <el-form-item label="来源单据" prop="sourceDocument">
            <el-input v-model="form.sourceDocument" placeholder="请输入来源单据" />
          </el-form-item>
        </el-col>
        <el-col :sm="12" :xs="24">
          <el-form-item label="退料单号" prop="returnCode">
            <el-input v-model="form.returnCode" placeholder="请输入退料单号" />
          </el-form-item>
        </el-col>
        <el-col :sm="12" :xs="24">
          <el-form-item label="退料日期" prop="returnDate">
            <el-date-picker clearable v-model="form.returnDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择退料日期" style="width:100%" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">物料信息</el-divider>
      <el-row :gutter="24">
        <el-col :sm="12" :xs="24">
          <el-form-item label="物料编码" prop="materialCode">
            <el-input v-model="form.materialCode" placeholder="请输入物料编码" />
          </el-form-item>
        </el-col>
        <el-col :sm="12" :xs="24">
          <el-form-item label="物料名称" prop="materialName">
            <el-input v-model="form.materialName" placeholder="请输入物料名称" />
          </el-form-item>
        </el-col>
        <el-col :sm="12" :xs="24">
          <el-form-item label="规格" prop="specification">
            <el-input v-model="form.specification" placeholder="请输入规格" />
          </el-form-item>
        </el-col>
        <el-col :sm="12" :xs="24">
          <el-form-item label="审核状态" prop="auditStatus">
            <el-select v-model="form.auditStatus" placeholder="请选择审核状态">
              <el-option label="未审核" value="未审核" />
              <el-option label="已审核" value="已审核" />
              <el-option label="驳回" value="驳回" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">数量信息</el-divider>
      <el-row :gutter="24">
        <el-col :sm="12" :xs="24">
          <el-form-item label="实退数量" prop="actualReturnQty">
            <el-input v-model.number="form.actualReturnQty" type="number" min="0" placeholder="请输入实退数量" />
          </el-form-item>
        </el-col>
        <el-col :sm="12" :xs="24">
          <el-form-item label="核销数量" prop="writeOffQty">
            <el-input v-model.number="form.writeOffQty" type="number" min="0" placeholder="请输入核销数量" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">人员信息</el-divider>
      <el-row :gutter="24">
        <el-col :sm="12" :xs="24">
          <el-form-item label="退料人" prop="returnBy">
            <el-input v-model="form.returnBy" placeholder="请输入退料人" />
          </el-form-item>
        </el-col>
        <el-col :sm="12" :xs="24">
          <el-form-item label="创建人" prop="createdBy">
            <el-input v-model="form.createdBy" placeholder="请输入创建人" />
          </el-form-item>
        </el-col>
        <el-col :sm="24" :xs="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div style="margin: 16px 0 0 0;">
      <return-materials-detail-table v-model="form.details" />
    </div>
    <div class="dialog-footer" style="margin-top: 32px; text-align: center;">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { addReturnMaterials } from '@/api/returnMaterials/returnMaterials'
import { listReturnMaterials_detail } from '@/api/returnMaterials_detail/returnMaterials_detail'
import ReturnMaterialsDetailTable from '@/views/returnMaterials_detail/returnMaterials_detail/ReturnMaterialsDetailTable.vue'

export default {
  name: 'ReturnMaterialsAdd',
  meta: { title: '新增退料' },
  components: { ReturnMaterialsDetailTable },
  data() {
    return {
      form: {
        documentType: null,
        sourceDocument: null,
        returnCode: null,
        specification: null,
        materialCode: null,
        materialName: null,
        actualReturnQty: null,
        writeOffQty: null,
        auditStatus: null,
        returnDate: null,
        returnBy: null,
        createdBy: null,
        remark: null,
        details: []
      },
      rules: {}
    }
  },
  created() {
    // 自动加载全部子表数据
    listReturnMaterials_detail({ pageNum: 1, pageSize: 9999 }).then(res => {
      this.form.details = res.rows || [];
    });
  },
  methods: {
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          addReturnMaterials(this.form).then(response => {
            this.$modal.msgSuccess("新增成功")
            this.$router.back()
          })
        }
      })
    },
    cancel() {
      this.$router.back()
    }
  }
}
</script>

<style scoped>
.return-materials-form {
  background: #fff;
  padding: 24px 18px 8px 18px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(41,128,185,0.08);
}
</style> 